<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>递归组件</p>
    <digui v-my-directive :data="shopList"></digui>

    <el-menu
      default-active="2"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <template v-for="item in menuData" :index="item.key">
        <!-- 只有一级显示 -->
        <div :key="item.key" v-if="!item.sub">
          <el-menu-item :index="item.key">
            <i :class="item.icon"></i>
            <span>{{ item.text }}</span>
          </el-menu-item>
        </div>
        <!-- 多级显示 -->
        <div :key="item.key" v-else>
          <!-- 一级 -->
          <el-submenu :index="item.key">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.text }}</span>
            </template>
            <!-- 二级 -->
            <template v-for="item2 in item.sub">
              <!-- 只有一级 -->
              <div :key="item2.key" v-if="!item2.sub">
                <el-menu-item :index="item2.key">
                  <i :class="item2.icon"></i>
                  {{ item2.text }}
                </el-menu-item>
              </div>
              <!-- 多级 -->
              <div :key="item2.key" v-else>
                <el-submenu :index="item2.key">
                  <template slot="title">
                    <i :class="item2.icon"></i>
                    <span>{{ item2.text }}</span>
                  </template>
                  <!-- 三级 -->
                  <template v-for="item3 in item2.sub">
                    <div :key="item3.key" v-if="!item3.sub">
                      <el-menu-item :index="item3.key">
                        <i :class="item3.icon"></i>
                        <span>{{ item3.text }}</span>
                      </el-menu-item>
                    </div>
                  </template>
                </el-submenu>
              </div>
            </template>
          </el-submenu>
        </div>
      </template>
    </el-menu>
    <p>下面使用递归封装该menu组件</p>
    <!--左侧菜单组件-->
    <el-menu
      default-active="2"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
  </div>
</template>

<script>
import digui from "@/components/digui.vue";
import NavMenu from "@/components/navMenu.vue";
export default {
  components: {
    digui,
    NavMenu,
  },
  data() {
    return {
      shopList: [
        {
          type: "电器",
          id: 1,
          children: [
            {
              type: "空调",
              id: 1 - 1,
            },
            {
              type: "冰柜",
              id: 1 - 2,
            },
            {
              type: "液晶电视",
              id: 1 - 3,
            },
          ],
        },
        {
          type: "衣服",
          id: 2,
          children: [
            {
              type: "男装",
              id: 2 - 1,
              children: [
                {
                  type: "风衣",
                  id: 2 - 1 - 1,
                },
                {
                  type: "夹克",
                  id: 2 - 1 - 2,
                },
                {
                  type: "工装裤",
                  id: 2 - 1 - 3,
                },
              ],
            },
            {
              type: "女装",
              id: 2 - 2,
              children: [
                {
                  type: "连衣裙",
                  id: 2 - 2 - 1,
                },
                {
                  type: "牛仔裤",
                  id: 2 - 2 - 2,
                },
                {
                  type: "短裙",
                  id: 2 - 2 - 3,
                },
              ],
            },
          ],
        },
      ],
      a: 1,
      // 侧边栏菜单
      menuData: [
        {
          key: "/manage",
          icon: "el-icon-menu",
          path: "/manage",
          text: "dooring工作台",
        },
        {
          key: "/manage/anazly",
          icon: "el-icon-s-data",
          path: "/manage/anazly",
          text: "数据大盘",
        },
        {
          key: "/manage/h5",
          icon: "el-icon-s-custom",
          text: "H5服务中心",
          sub: [
            {
              key: "/manage/h5/config",
              icon: "el-icon-s-promotion",
              path: "/manage/h5/config",
              text: "H5页面管理",
              sub: [
                {
                  key: "123",
                  path: "/manage/h6/config",
                  text: "H6页面管理",
                },
                {
                  key: "234",
                  path: "/manage/h6/config",
                  text: "H7页面管理",
                  sub: [
                    {
                      key: "2343333",
                      path: "/manage/h6/config",
                      text: "4级菜单",
                    },
                  ],
                },
              ],
            },
            {
              key: "/manage/h5/tpl",
              icon: "el-icon-s-goods",
              path: "/manage/h5/tpl",
              text: "模板库",
            },
            {
              key: "/manage/h6/tpl",
              icon: "el-icon-delete",
              path: "/manage/h6/tpl",
              text: "模板库2",
            },
          ],
        },
        {
          key: "/manage/order",
          icon: "el-icon-s-opportunity",
          path: "/manage/order",
          text: "订单管理",
          sub: [
            {
              key: "/manage/addorder",
              icon: "el-icon-s-opportunity",
              path: "/manage/addorder",
              text: "添加订单",
              sub: [
                {
                  key: "/manage/addorder1",
                  path: "/manage/addorder1",
                  text: "添加订单111",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.$myMethod();
  },
  methods: {},
};
</script>

<style lang="css" scoped>
.el-menu {
  width: 240px;
  text-align: left;
}
</style>
